<template>
  <div>
    <div class="outer">
      <div class="minbox">
        <img src="../assets/img/tgg1.jpg" alt="">
        <p class="mask"></p>
      </div>
      <div class="bigbox">
        <img src="../assets/img/tgg1.jpg" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MainUser",
  data(){
    return{
      oMinBox : document.querySelector('.outer>.minbox'),
      oMask : document.querySelector('.outer>.minbox>.mask'),
      oBigBox : document.querySelector('.outer>.bigbox'),
      oImg : document.querySelector('.outer>.bigbox>img')

    }
  },
  methods:{


  }
}
</script>
<style>
*{
  margin:0px;
  padding:0px;
}
.outer{
  position:relative;
  margin: 50px auto;
}
.outer:after{
  content: "\200B";
  display:block;
  height:0;
  clear:both;
}
.outer>.minbox{
  width:400px;
  height:200px;
  border:1px solid #888888;
  float: left;
  position: relative;
}
.outer>.minbox>img{
  width:400px;
  height:200px;
}
.outer>.minbox>.mask{
  width:100px;
  height:100px;
  background-color: rgba(135, 223, 170, 0.58);
  position:absolute;
  top:0;
  left:0;
  display:none;
}
.outer>.bigbox{
  width:250px;
  height:250px;
  position: absolute;
  left:402px;
  top:0px;
  overflow: hidden;
  display:none;
}
.outer>.bigbox>img{
  width:800px;
  height:400px;
}
</style>

<style scoped>

</style>